<template>
    <el-row>
        <el-row class="fen">
            <el-col :span="4" style="color: red">
                <span class="title"></span>订单详情
            </el-col>
            <el-col :span="6" :offset="14">
                <el-button size="small" @click="refresh"><i class="el-icon-refresh"></i>刷新</el-button>
                <el-button size="small" @click="back"><i class="el-icon-close" ></i>关闭</el-button>
                <el-button size="small" @click="back"><i class="el-icon-arrow-left"></i>返回</el-button>
            </el-col>
        </el-row>
        <el-row class="fen" style="height: 50px">
            <el-col :span="4" style="color: red;font-size: large;font-weight: bolder">当前订单状态{{this.detail.orderStatus | status}}</el-col>
            <el-col :span="6" :offset="14"><el-button @click="showChange">修改收货人信息</el-button><el-button @click="remarkShow=true">备注订单</el-button></el-col>
        </el-row>
        <el-row>
            <el-descriptions title="基本信息" direction="vertical" :column="6" border size="medium">
                <el-descriptions-item label="订单编号">{{this.detail.orderNo}} </el-descriptions-item>
                <el-descriptions-item label="发货单流水号">18100000000</el-descriptions-item>
                <el-descriptions-item label="用户账号" :span="2">{{this.detail.userNumber}}</el-descriptions-item>
                <el-descriptions-item label="支付方式">{{this.detail.orderPaymentChannel | payment}}</el-descriptions-item>
                <el-descriptions-item label="订单来源">{{this.detail.orderSource | source}}</el-descriptions-item>
                <el-descriptions-item label="订单类型">{{this.detail.orderType | typeFormatter}}</el-descriptions-item>
                <el-descriptions-item label="配送方式">快递</el-descriptions-item>
                <el-descriptions-item label="物流单号">{{this.detail.orderLogisticsNumber}}</el-descriptions-item>
                <el-descriptions-item label="自动确认收货时间">7天 </el-descriptions-item>
                <el-descriptions-item label="活动信息">无</el-descriptions-item>
            </el-descriptions>
            <el-descriptions title="收货人信息" direction="vertical" :column="4" border size="medium">
                <el-descriptions-item label="收货人">{{this.detail.myaddress.consignee}}</el-descriptions-item>
                <el-descriptions-item label="手机号">{{this.detail.myaddress.phoneNumber}}</el-descriptions-item>
                <el-descriptions-item label="邮政编码" >{{this.detail.myaddress.postalCode}}</el-descriptions-item>
                <el-descriptions-item label="收货地址">{{this.detail.myaddress.address}}</el-descriptions-item>
            </el-descriptions>
            <el-descriptions title="商品信息" direction="vertical" :column="7" border size="medium">
                <el-descriptions-item label="商品图片"><img :src="this.imgUrl"/></el-descriptions-item>
                <el-descriptions-item label="商品名称">{{this.commodityName}}</el-descriptions-item>
                <el-descriptions-item label="价格">{{this.price}}</el-descriptions-item>
                <el-descriptions-item label="编号">{{this.number}}</el-descriptions-item>
                <el-descriptions-item label="数量">{{this.detail.productCount}}</el-descriptions-item>
                <el-descriptions-item label="类型">{{this.detail.orderType | typeFormatter}}</el-descriptions-item>
                <el-descriptions-item label="小计">{{this.detail.priceTotal | moneyFormatter}}</el-descriptions-item>
            </el-descriptions>
            <el-descriptions title="费用信息" direction="vertical" :column="4" border size="medium">
                <el-descriptions-item label="商品合计">{{this.detail.priceTotal | moneyFormatter}}</el-descriptions-item>
                <el-descriptions-item label="运费">{{this.detail.freightAmount | moneyFormatter}}</el-descriptions-item>
                <el-descriptions-item label="优惠券" :span="2">无</el-descriptions-item>
                <el-descriptions-item label="订单总金额">{{this.detail.logisticsFee | moneyFormatter}}</el-descriptions-item>
                <el-descriptions-item label="应付款金额">{{this.detail.logisticsFee | moneyFormatter}}</el-descriptions-item>
            </el-descriptions>
        </el-row>
        <el-dialog title="修改收货人信息" :visible.sync="show">
            <el-form>
                    <el-input type="hidden" :value="this.detail.myaddress.id"></el-input>
                <el-form-item label="收货人姓名">
                    <el-input autocomplete="off" v-model="updateAddress.consignee"></el-input>
                </el-form-item>
                <el-form-item label="手机号码">
                    <el-input autocomplete="off" v-model="updateAddress.phoneNumber"></el-input>
                </el-form-item>
                <el-form-item label="邮政编码">
                    <el-input autocomplete="off" v-model="updateAddress.postalCode"></el-input>
                </el-form-item>
                <el-form-item label="所在区域">
                    <el-select v-model="provinceId" placeholder="省" @change="handleProvinceChange">
                        <el-option
                                v-for="item in provinceList"
                                :key="item.id"
                                :label="item.cname"
                                :value="item.id" @click.native="cityInfo[0]=item.cname">
                        </el-option>
                    </el-select>
                    <el-select v-model="cityId"  placeholder="市" @change="handleCityChange">
                        <el-option
                                v-for="item in cityList"
                                :key="item.id"
                                :label="item.cname"
                                :value="item.id" @click.native="cityInfo[1]=item.cname">
                        </el-option>
                    </el-select>
                    <el-select v-model="districtId" placeholder="区">
                        <el-option
                                v-for="item in districtList"
                                :key="item.id"
                                :label="item.cname"
                                :value="item.id"
                                @click.native="cityInfo[2]=item.cname">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="详细地址">
                    <el-input
                            type="textarea"
                            :rows="2"
                            placeholder="请输入内容"
                            v-model="updateAddress.detailedAddress">
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="show = false">取 消</el-button>
                <el-button type="primary" @click="sendAddress">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="备注订单" :visible.sync="remarkShow">
            <el-form>
                <el-input
                        type="textarea"
                        :rows="2"
                        placeholder="请输入内容"
                        v-model="remarks">
                </el-input>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="remarkShow = false">取 消</el-button>
                <el-button type="primary" @click="makeRemarks">确 定</el-button>
            </div>
        </el-dialog>
    </el-row>
</template>

<script>
    //this.consignee,this.phoneNumber,this.postalCode,this.detailedAddress,
    import {Store as $store} from "vuex";

    export default {
        inject: ['reload'],
        name: "OrderDetail",
        data(){
            return{
                imgUrl:'',
                commodityName:'',
                number:'',
                price:'',
                remarks:'',
                updateAddress:{
                    id:'',
                    consignee:'',//收货人
                    phoneNumber:'',//手机号码
                    postalCode:'',//邮政编码
                    address:'',
                    detailedAddress:'',//详细地址
                },
                cityList:[],
                districtList:[],
                provinceList:[],
                orderNo:'',
                orderType:'',
                show:false,
                remarkShow:false,
                dialogFormVisible:false,
                detail:'',
                provinceId:'',
                cityId:'',
                districtId:'',
                cityInfo:[]
            }
        },
        filters:{
            status(val){
                if(val==2){
                    return '待付款'
                }
                if(val==3){
                    return '已付款'
                }
                if(val==4){
                    return '待发货'
                }
                if(val==5){
                    return '已发货'
                }
                if(val==6){
                    return '已签收'
                }
                if(val==7){
                    return '退货申请'
                }
                if(val==8){
                    return '退货中'
                }
                if(val==9){
                    return '已退货'
                }
                if(val==10){
                    return '取消交易'
                }
            },
            payment(val){
                if(val==2){
                    return '微信支付';
                }
                if(val==3){
                    return '余额支付';
                }
            },
            source(val){
                if(val==2){
                    return '小程序';
                }
                if(val==3){
                    return 'APP';
                }
            },
            typeFormatter(val){
                if(val==2){
                    return '视频';
                }
                if(val==3){
                    return '商品';
                }
            },
            moneyFormatter(val){
                return '￥'+val;
            }
        },
        methods:{
            sendAddress(){
                let address='';
                for(var i=0;i<this.cityInfo.length;i++){
                    address+=this.cityInfo[i];
                }
                this.updateAddress.address=address;
                this.updateAddress.id=this.detail.myaddress.id;
                this.$http(
                    {method:'post', url:"/order/updateConsigneeInformation",data:this.updateAddress})
                    .then(res => {
                        alert(res.data.message)
                })
            },
            makeRemarks(){
                var updataRemarks={
                    orderNo:this.orderNo,
                    remarks:this.remarks
                }
                this.sendRemarks(updataRemarks)
            },
            sendRemarks(updateRemarks){
                this.$http({method:'post',url:'order/updateRemarks',data:updateRemarks}).then(res=>{

                })
            },
            refresh(){
                location.reload();
            },
            back(){
                this.$router.back()
            },
            getData(){
                this.orderNo=this.$store.state.orderNo;
                this.orderType=this.$store.state.orderType;
                console.log(this.orderType);
                this.$http({method:'get',url:"/order/getDetail",params:{orderNo:this.orderNo,orderType:this.orderType}}).then(res => {
                    this.detail = res.data;
                    if (this.orderType==3){
                        this.imgUrl=res.data.product.mainImage;
                        this.commodityName=res.data.product.productName;
                        this.number=res.data.product.productCode;
                        this.price=res.data.product.currentpriceProduct;
                    }else if(this.orderType==2){
                        this.imgUrl=res.data.course.url;
                        this.commodityName=res.data.course.courseName;
                        this.number=res.data.course.courseId;
                        this.price=res.data.course.coursePrice;
                    }
                })
            },
            showChange(){
                this.show=true;
                this.getProvinceList();
            },
            getProvinceList(){
                this.$http({method:'get',url:"/order/getProvinceList"}).then(res => {
                    this.provinceList = res.data;
                })
            },
            handleProvinceChange(val){
                console.log(val)
                this.provinceId=val;
                this.getCityList();
            },
            handleCityChange(val){
                this.cityId=val;
                this.getDistrictList();
            },
            cancel(){
                this.show = false;
                this.provinceId='';
                this.cityId="";
                this.districtId="";
            },
            getCityList(){
                for(var i=0;i<this.provinceList.length;i++){
                    if(this.provinceList[i].id==this.provinceId){
                        this.cityList=this.provinceList[i].children
                    }
                }
            },
            getDistrictList(){
                for(var i=0;i<this.cityList.length;i++){
                    if(this.cityList[i].id==this.cityId){
                        this.districtList=this.cityList[i].children
                    }
                }
            }
        },
        created(){
            this.getData();
        }
    }
</script>

<style scoped>
    .el-input{
        width: 300px;
    }
    .el-select{
        width:100px
    }
    .fen{
        height: 50px;
        line-height: 50px;
        background-color: #F3F3F3;
    }
</style>